<template>
    <div class="map-search">
        <div class="map-filter">
            <input type="text" placeholder="在此输入">
            <div class="tips" @click="()=>{this.tipsChange=!this.tipsChange}">{{tipsChange?'鼠标绘制多边形进行检索':'双击鼠标完成绘制'}}</div>
        </div>
        <div class="map-box">
            <div id="container"></div>
            <div class="ctrl">
                <button type="button">清除选中区域</button>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data(){
            return{
                tipsChange:true
            }
        },
        mounted() {
            const script=document.createElement('script')
            script.type='text/javascript'
            script.src = "https://webapi.amap.com/maps?v=1.4.15&key=e7e1f58a7f002e357fcb3eecf6fad2c0&plugin=AMap.MouseTool"
            document.getElementsByTagName("head")[0].appendChild(script)
            script.onload=()=>{
                const map = new AMap.Map('container',{
                    zoom:14
                });
                const mouseTool = new AMap.MouseTool(map);
                //监听draw事件可获取画好的覆盖物
                let overlays = [];
                mouseTool.on('draw',function(e){
                    overlays.push(e.obj);
                })

                mouseTool.polygon({
                    fillColor:'#00b0ff',
                    strokeColor:'#80d8ff'
                    //同Polygon的Option设置
                });

            }
        }
    }
</script>

<style lang="less" scoped>
    .map-search{
        width: 94%;
        margin: 0 auto;
        max-width: 1140px;
        font-size: 1rem;
        .map-box{
            position: relative;
            width: 100%;
            height: calc(100vh - 180px);
            border: 1px solid #ddd;
            #container{
                width: 100%;
                height: calc(100vh - 180px);
            }
            .ctrl{
                position: absolute;
                bottom: 10px;
                right: 10px;
                width: 120px;
                height: 34px;
                button{
                    display: block;
                    width: 120px;
                    height: 34px;text-align: center;
                    line-height: 32px;
                    border-radius: 17px;
                    color: #fff;
                    background: #00a9e3;
                }
            }
        }
        .map-filter{
            display: flex;
            justify-content: space-between;
            padding: 8px 15px;
            background: #126e82;
            align-items: center;
            input{
                flex-grow: 1;
                background: #fff;
                height: 36px;
                line-height: 36px;
                padding-left: 10px;
                border-radius: 18px;
            }
            .tips{
                width: 250px;
                height: 34px;
                color: #fff;
                text-align: center;
                line-height: 34px;
                background: #965248;
                border-radius: 5px;
                margin-left: 20px;
                cursor: pointer;
                user-select:none
            }
        }
    }
</style>
